import React, { PureComponent } from 'react';
import { Table, Dropdown, Menu, Card } from 'antd';
import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
import style from '../base.less';
import { connect } from 'dva';

interface typeProps {
  list?: any;
  keyName: string;
  columns: Array<typeColumns>;
  menu?: any;
  title: typeTitle;
  permissions: any;
  pathname: string;
  onRef: any;
}
interface typeTitle {
  name: string;
  onClick: void;
}
interface typeColumns {
  title: string;
  dataIndex: string;
}
interface DataType {
  key: React.Key;
  name: string;
}
interface typeState {
  selectedRowKeys: Array<string | number>;
}

const mapStateToProps = (state: any) => {
  return {
    permissions: state?.menu?.permissions,
    pathname: state?.routing?.location?.pathname,
  };
};

class radiosTable extends PureComponent<typeProps, typeState> {
  state = {
    selectedRowKeys: [],
  };
  componentDidMount() {
    const { onRef = '' } = this.props;
    onRef && onRef(this);
  }
  setIndex = (name: string | number) => {
    this.setState({
      selectedRowKeys: [name],
    });
  };
  authFn = (auth: string = '') => {
    const { permissions = {}, pathname = '' } = this.props;

    return permissions.includes(`${pathname}/${auth}`);
  };
  render() {
    const { selectedRowKeys } = this.state;
    const { columns, list, keyName, menu, title, menuName = '操作' ,...setTable} = this.props;

    const columnsArr = [
      ...columns,
      {
        title: menuName,
        dataIndex: '操作',
        // fixed:"right",
        render: (text: any, record: any) => {
          const menuArr = (
            <Menu>
              {menu.map(
                e =>
                  this.authFn(e.auth) && (
                    <Menu.Item onClick={() => e.onClick && e.onClick(record)} key={e.name}>
                      {e.name}
                    </Menu.Item>
                  ),
              )}
            </Menu>
          );
          return (
            <Dropdown overlay={menuArr} trigger={['click']}>
              <MoreOutlined className="icon-more" />
            </Dropdown>
          );
        },
      },
    ];

    const tableProps = {
      columns: columnsArr,
      dataSource: list,
      pagination: false,
      rowSelection: {
        selectedRowKeys,
        type: 'radio',
        // 不显示单选框
        renderCell: () => '',
        columnWidth: 0,
      },
      rowKey: (row: DataType) => row[keyName],
      ...setTable,
      onRow: (record: DataType) => ({
        onClick: () => {
          const { selectedRowKeys } = this.state;
          const { onRow } = this.props;
          if (selectedRowKeys[0] === record[keyName]) {
            return false;
          }
          onRow && onRow(record);
          this.setState({ selectedRowKeys: [record[keyName]] });
        },
      }),
    };
    return (
      <Card
        bordered={false}
        title={title.name}
        extra={
          this.authFn(title.auth) && (
            <PlusOutlined
              className="icon-add"
              onClick={() => {
                title.onClick && title.onClick();
              }}
            />
          )
        }
      >
        <div className={style.tableBase}>
          <Table {...tableProps} />
        </div>
      </Card>
    );
  }
}

export default connect(mapStateToProps)(radiosTable);
